<style lang="scss">
@import '@/assets/css/variable';
.policy{
	background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/0008e0cd-2715-4856-857a-b647a1e5134b.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	box-sizing: border-box;
	// text-align: center;
	.imgBox{
		margin-top: 3.2rem;
		.topImg{
			width: 205px;
		}
	}
	.searchBox{
		margin-top: 3rem;
		width: 84%;
		height: 40px;
		background: #FFFFFF;
		border-radius: 20px;
		.leftBox{
			.input{
				border: none;
				margin-left: 6px;
				font-size: 15px;
				width: 150px;
			}
		}
		.rightBox{
			.searchBtn{
				width: 60px;
				height: 30px;
				background: linear-gradient(0deg, #25BFF6, #0F91BE);
				border-radius: 15px;
				color: #FFFFFF;
				font-size: 15px;
				border: none;
				margin-right: 6px;
				letter-spacing: 1px;
				padding-left: 0;
				padding-right: 0;
			}
			.searchBtn2{
				width: 66px;
				height: 36px;
				background: linear-gradient(0deg, #25BFF6, #0F91BE);
				border-radius: 18px;
				color: #FFFFFF;
				font-size: 18px;
				border: none;
				margin-right: 6px;
				letter-spacing: 1px;
				padding-left: 0;
				padding-right: 0;
			}
		}
	}
	.search_hot{
		color: white;
		margin-top: 1.2rem;
		overflow-x: scroll;
		.label{
			margin-right: 0px;
		}
		.tag{
			height: 20px;
			line-height: 20px;
			background: rgba(255, 255, 255, 0.43);
			border-radius: 10px;
			font-size: 12px;
			padding: 0px 12px;
			margin-left: 8px;
		}
		.tag2{
			height: 26px;
			line-height: 26px;
			background: rgba(255, 255, 255, 0.43);
			border-radius: 13px;
			font-size: 15px;
			padding: 0px 12px;
			margin-left: 8px;
		}
	}
	.newsOne{
		box-sizing: border-box;
		width: 92%;
		height: 40px;
		margin-top: 2rem;
		background: #FFFFFF;
		border-radius: 6px;
	}
	$widthMatch:72px;
	.matchBox{
		position: fixed;
		right: 1.2rem;
		bottom: 5.5rem;
		width: $widthMatch;
		height: $widthMatch;
		background: url(../../assets/img/policy/matchBox.png) no-repeat;
		background-position: center;
		background-size: 100% 100%;
		.mBoxWrapper{
			position: relative;
			width: $widthMatch;
			height: $widthMatch;
			img{
				width: $widthMatch;
			}
			.textBox{
				// position: absolute;
				// left: 0;
				// top: 0;
			}
		}
		
	}
}
.notice-swipe {
	height: 40px;
	line-height: 40px;
}
</style>

<template>
  <div class="policy wrapperContent" ref="policy" @scroll="scrollBottom">
    <div class="imgBox mar-center text-center">
		<img class="topImg" src="../../assets/img/policy/ptext.png">
	</div>
	<div class="searchBox mar-center flex align-center justify-between" :style="{height:fontSize==1?'40px':'46px',borderRadius: fontSize==1?'20px':'23px'}">
		<div class="leftBox flex align-center">
			<img class="mar-l-20" src="../../assets/img/policy/search.png" style="width: 14px;" :style="{width:fontSize==1?'15px':'18px'}">
			<input class="input" :style="{fontSize: fontSize==1?'15px':'18px'}" type="text" v-model="searchText" placeholder="输入政策关键词"/>
		</div>
		<div class="rightBox" :style="{flex:fontSize==1?'0 0 60px':'0 0 66px'}">
			<van-button :class="fontSize==1?'searchBtn':'searchBtn2'" @click="searchBtn">搜索</van-button>
		</div>
	</div>
	<div class="search_hot flex align-center justify-center flex-wrap">
		<span class="label" :style="{fontSize:fontSize==1?'12px':'16px'}">热门搜索</span>
		<span :class="fontSize==1?'tag':'tag2'" v-for="(item,index) in keywordsList" @click="clickTag(item.keywords)">{{item.keywords}}</span>
	</div>
	<div class="newsOne mar-center flex align-center bac-color-fff padding-lr-m">
		<div class="" style="flex: 0 0 32px;">
			<img class="w-100" src="../../assets/img/policy/news.png">
		</div>
		<van-swipe
		  vertical
		  class="notice-swipe mar-l-10 flex-1"
		  :autoplay="3000"
		  :show-indicators="false"
		>
		  <van-swipe-item v-for="(item,index) in lastApplyList" :key="index">
			  <div class="flex align-center justify-between" style="height: 40px;width: 100%;" :style="{fontSize:fontSize==1?'13px':'18px'}">
				  <span class="ellipsis-line1" style="flex: 0 0 170px !important;height: 40px;">{{item.content}}</span>
				  <span class="" style="height: 40px;">{{item.time}}</span>
			  </div>
		  </van-swipe-item>
		</van-swipe>
	</div>
	
	<div class="tabList w-100 flex align-center justify-around mar-t-20" v-if="tabList">
		<div style="flex: 0 0 10px;"></div>
		<div class="tabItem flex flex-column align-center" style="min-width: 60px;" v-for="(item,index) in tabList" :key="index" @click="tabClick(item,index)">
			<img class="" style="width:26px" :src="item.img" >
			<div class="fc-f4f4f4 mar-t-8 text-mini ellipsis-line1" :style="{fontSize:fontSize==1?'14px':'18px'}">{{item.text}}</div>
			<div class="selectedLine" v-if="active==index"></div>
		</div>
		<div style="flex: 0 0 10px;"></div>
	</div>
	<my-list :list="listCatchData[active]" :load="load[active]"></my-list>
	<div class="matchBox" @click="matchBtn">
		<div class="mBoxWrapper flex flex-column align-center justify-around">
			<!-- <img src="../../assets/img/policy/matchBox.png" alt=""> -->
			<div class="textBox fs-18 fc-fff t-bold letter-s-2">
				<div class="">政策</div>
				<div class="mar-t-5 ">匹配</div>
			</div>
		</div>
	</div>
	<!-- <router-view/> -->
  </div>
</template>
<script>
import myList from '@/components/list/IndexList.vue'
import {Toast,Dialog} from 'vant'
import { mapGetters, mapActions } from "vuex";
import { myMixins } from "@/assets/js/mixins.js";
export default {
  name:'home',
  mixins: [myMixins],
  components: {myList},
  data() {
    return {
		searchText:'',
		searchTag:['毕业生','军人','残障人士'],
		active:0,
		tabList:[
			{id:0,text:'全部',img:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/e6678400-85b3-4b85-96a6-f6a1b67434e5.png'},
			{id:1,text:'毕业生',img:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/780c896b-0db6-4c66-97c3-a1605319def9.png'},
			{id:2,text:'失业人员',img:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/ea0d9de0-b465-4899-87d9-8b3dfd9d56c7.png'},
			{id:3,text:'退役军人',img:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/cbc817d7-3e0d-41da-bda3-5bdbb76d17b2.png'},
			{id:4,text:'残障人士',img:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/c76a56ad-a473-4aad-b093-e2bea64cfa1b.png'},
		],
		policy_keywords:'',
		is_validity:1,
		// pageSize:10,
		// currPage:1
		listCatchData:{},
		load:{},
		pageSize:10,
		lastApplyList:'',
		diys:'',
		form:''
		// keywordsList:[]
    };
  },
  created() {
	  document.title = '苍南县数字创业服务平台'
    console.log('++++++++++++++create_home')
	localStorage.setItem('matchTimes',0)
	this.bus.$on('fromLogin',()=>{
		if(localStorage.getItem('fromPage')=='login'){
			localStorage.setItem('fromPage','')
			location.reload()
		}
	})
  },
  beforeDestroy() {
  	this.bus.$off('scrollToTop')
	this.bus.$off('fromLogin')
  },
  computed: {
    ...mapGetters(['keywordsList']),
  },
  
  mounted() {
	  console.log('++++++++++++++++++mounted_home')
	  this.bus.$on('scrollToTop',()=>{
	  	// this.$refs.policy.scrollTo(0,localStorage.getItem('scrollTop'))
	  	this.$refs.policy.scrollTop = localStorage.getItem('scrollTop')
	  })
	  // this.$nextTick(()=>{
		 //  this.$refs.policy.scrollTo(0,100)
	  // },1000)
	  // console.log('mounted')
	let params = window.location.hash;
	let hash = params.substr(2);
	this.bus.$emit('refreshTabbar',hash)
	// this.unitsPolicyList(this.active)
	this.active = localStorage.getItem('active') || 0
	this.policy_keywords = localStorage.getItem('policy_keywords') || ''
	const p = {
	  pageSize: 3,
	  currPage: 1
	}
	this.GET_Keywords(p).then(res=>{
		if(res.code == 200) {
			// this.getList(this.active)
			this.latestApply()
		}
	})
	this.getList(this.active)
  },
  methods: {
	  ...mapActions(['GET_Keywords','GET_Member','GET_AllMember','Match_policy']),
	  matchBtn() {
	  	let matchTimes = localStorage.getItem('matchTimes')
	  	if(matchTimes>0){
	  		Dialog({ title:'温馨提示', message: '请勿频繁匹配'}).then(() => {
	  		  // on close
	  		  location.reload()
	  		});
	  		return
	  	}
	  	localStorage.setItem('matchResult',1)
	  	// this.$router.push('/match')
	  	this.getAllMember()
	  	// this.GET_AllMember().then(res=>{
	  	// 	console.log('GET_Member__res',res)
	  	// 	if(res.data.company){
	  	// 		console.log('res.data.member_name',res.data.member_name)
	  	// 		console.log('res.data.company.legal_person_name',res.data.company.legal_person_name)
	  	// 		if(res.data.member_name!=res.data.company.legal_person_name) {
	  	// 			Dialog({ title:'温馨提示', message: '企业法人与申请非同一个人', closeOnClickOverlay:true });
	  	// 			return
	  	// 		}
	  	// 	}
	  	// 	this.diys = res.data.diys.list
	  	// 	console.log('=看这里==',this.diys)
	  	// 	if(res.data.is_perfect){
	  	// 		this.Match_policy().then((res)=>{
	  	// 			console.log('matePolicy_res',res)
	  	// 			if(res.code==202){
	  	// 				Dialog({ title:'温馨提示', message: res.msg, closeOnClickOverlay:true });
	  	// 				return
	  	// 			}
	  	// 			this.juegeDiy()
	  	// 		})
	  	// 	}else{
	  			
	  	// 		this.toPerfectInfo()
	  	// 	}
	  	// 	// this.$router.push('/match')
	  	// })
	  	
	  },
	  toPerfectInfo() {
	  	Dialog({
	  		title:'温馨提示',
	  		message: '请先去完善个人信息',
	  		closeOnClickOverlay:true
	  	}).then(res=>{
	  		if(res=='confirm'){
	  			this.$router.push('/member/editUserInfo')
	  		}
	  	});
	  },
	  juegeDiy() {
	  	this.$request.getInputMemberFields().then(res=>{
	  		// console.log('res',res)
	  		this.returnData = res.data.data
	  		var diyField = []
	  		// let diyField =new Set();//搜索结果集合
	  		for(let key in this.returnData){
	  			if(this.returnData[key].group=='diy'){
	  				if(this.returnData[key].input_type=='checkbox'){
	  					this.returnData[key].field_value = []
	  				}else{
	  					this.returnData[key].field_value = ''
	  				}
	  				diyField.push(this.returnData[key])
	  			}
	  		}
	  		console.log('=先看这里==diyField===',diyField)
	  		for(let item of diyField) {
	  		  this.diys.forEach(jItem => {
	  			if(jItem.policy_diy_id==item.field_name){
	  				if(item.input_type=='checkbox'){
	  					item.field_value = (jItem.policy_diy_value&&jItem.policy_diy_value.split(',')) || []
	  					console.log('___item____',item)
	  				}else{
	  					item.field_value = jItem.policy_diy_value
	  				}
	  				return item
	  			}
	  		  })
	  		}
	  		console.log('______看这里______diyField',diyField)
	  		let isHaveNull = false
	  		// diyField.forEach(item=>{
	  		// 	if(!item.field_value) {
	  		// 		isHaveNull = true
	  		// 		return
	  		// 	}
	  		// })
	  		if(isHaveNull) {
	  			// this.toPerfectInfo()
	  		}else{
	  			this.$router.push('/match')
	  		}
	  	})
	  },
	  getAllMember() {
		  this.GET_AllMember().then(res=>{
			  console.log('GET_Member__res',res)
			  if(res.code == 200) {
				const company = res.data.company
				if(res.data.company){
					if(res.data.identity!='person'){
						if(res.data.member_name!=res.data.company.legal_person_name) {
							Dialog({ title:'温馨提示', message: '企业法人与申请非同一个人', closeOnClickOverlay:true });
							return
						}
					}
				}
				if(res.data.black_status) {
					Dialog({ title:'温馨提示', message: '您在黑名单内，无法匹配政策，若要匹配需联系系统管理员', closeOnClickOverlay:true }).then(res=>{
						this.$router.go(-1)
					})
					return;
				}
				this.form = Object.assign({},this.form,res.data)
				// 获取自定义表单
				this.getInputMemberFields();
			  }
		  })
	  },
	  getInputMemberFields() {
		  this.$request.getInputMemberFields().then(res=>{
			// console.log('res',res)
			this.returnData = res.data
			var diyField = []
			// let diyField =new Set();//搜索结果集合
			for(let key in this.returnData){
				if(this.returnData[key].group=='diy'){
					if(this.returnData[key].input_type=='checkbox'){
						this.returnData[key].field_value = []
					}else{
						this.returnData[key].field_value = ''
					}
					diyField.push(this.returnData[key])
				}
			}
			console.log('===diyField1111111111111===',diyField)
			diyField.map(item=>{
				this.form.diys.list.forEach(jItem => {
					// console.log('jItem.policy_diy_id',jItem.policy_diy_id)
					// console.log('field_name',item.field_name)
					// console.log('jItem.policy_diy_id==item.field_name',jItem.policy_diy_id==item.field_name)
					if(jItem.policy_diy_id==item.field_name){
						if(item.input_type=='checkbox'){
							item.field_value = (jItem.policy_diy_value&&jItem.policy_diy_value.split(',')) || []
							// console.log('___item____',item)
						}else{
							item.field_value = jItem.policy_diy_value
						}
						return item
					}
				})
			})
			this.diyField = diyField
			console.log('this.diyField22222222222222',this.diyField)
			
			
			let isHaveNull = false
			diyField.forEach(item=>{
				if(!item.field_value) {
					isHaveNull = true
					return
				}
			})
			if(isHaveNull) {
				this.toPerfectInfo()
			}else{
				this.$router.push('/match')
			}
		  })
	  },
	  clickTag(item) {
		  // console.log('item',item)
		  this.searchText = item
		  localStorage.setItem('searchText',this.searchText)
		  this.$router.push(`/searchResult?type=search&searchText=${this.searchText}`)
		  this.bus.$emit('refreshSearchResult')
	  },
	  latestApply() {
		  const params = {}
		  this.$request.latestApply(params).then(res=>{
		  	// console.log('res',res)
			this.lastApplyList = res.data
		  });
	  },
	tabClick(item,current) {
		this.active = current
		localStorage.setItem('active',this.active)
		this.policy_keywords = item.text=='全部'?'':item.text
		localStorage.setItem('policy_keywords',this.policy_keywords)
		if(!this.listCatchData[current] || this.listCatchData[current].length === 0){
			this.getList(current)
		}
	},
	getList(current) {
		if(!this.load[current]){
			this.load[current] = {
				page:1,
				loading:'loading'
			}
		}
		const params = {
			policy_keywords:this.policy_keywords,
			is_validity: this.is_validity,
			currPage:this.load[current].page,
			pageSize:this.pageSize
		}
		this.$request.unitsPolicyList(params).then(res => {
			if(res.data.length==0) return
			const data = res.data.list
			//如果没数据了
			if(data.length === 0 || data.length < this.pageSize){
				let oldLoad = {}
				oldLoad.loading = 'noMore'
				oldLoad.page = this.load[current].page
				this.load[current] = oldLoad
			}
			if(data.length == this.pageSize) {
				let oldLoad = {}
				oldLoad.loading = 'loadEnd'
				oldLoad.page = this.load[current].page
				this.load[current] = oldLoad
			}
			if(data.length>0){
				let oldList = this.listCatchData[current] || []
				oldList.push(...data)
				oldList.forEach(item=>{
					// if(item.policy_keywords==''){
					// 	item.policy_keywords = '未设置标签'
					// }
				})
				this.listCatchData[current] = oldList
			}
		}).finally(res=>{
			if(!this.listCatchData[current]||this.listCatchData[current].length<=0){
				// this.load[current].loading='noData'
				let oldLoad = {}
				oldLoad.loading = 'noData'
				oldLoad.page = this.load[current].page
				this.$set(this.load,current,oldLoad)
			}else{
				// this.load[current].loading='noMore'
				let oldLoad = {}
				oldLoad.loading = 'noMore'
				oldLoad.page = this.load[current].page
				this.$set(this.load,current,oldLoad)
			}
			// this.bus.$emit('refreshList',this.load[current])
			// console.log('this.load[current]',this.load[current])
			this.$forceUpdate()
			// console.log('this.$refs.policy.scrollTop',this.$refs.policy.scrollTop)
			setTimeout(()=>{
				this.$refs.policy.scrollTop = localStorage.getItem('scrollTop')
			},500)
		})
	},
    searchBtn() {
		if(!this.searchText){
			Toast('请填写搜索关键词')
			return
		}
		localStorage.setItem('searchText',this.searchText)
		this.$router.push(`/searchResult?type=search&searchText=${this.searchText}`)
		this.bus.$emit('refreshSearchResult')
	},
	scrollBottom(e) {
		// console.log('e',e)
		const {scrollTop, clientHeight, scrollHeight} = e.target
		// console.log(scrollTop, clientHeight, scrollHeight)
		localStorage.setItem('scrollTop',scrollTop)
		if (scrollTop + clientHeight === scrollHeight){
			console.log('滚动到底部啦')
			if(this.load[this.active].loading === 'noMore'||this.load[this.active].loading === 'noData') return
			this.load[this.active].page++
			this.getList(this.active)
		}
	},
  }
}

</script>